<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6" :xs="24">
        <el-row class="row">
        <user-card :user="userInfo" />
        </el-row>
        <el-row class="row">
          <el-col :span="24" :xs="24">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>博主文章</span>
                </div>
              </template>
                  <AllArticle :id="blog.userId" :is-look="true" />
            </el-card>
          </el-col>
        </el-row>
        <el-row class="row">
        <Sticky>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>评论</span>
              </div>
            </template>
            <AllComments :commentUserId="blog.userId" :articleId="blog.articleId" />
          </el-card>
        </Sticky>
        </el-row>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <h1 style="text-align: center">{{ blog.blogTitle }}</h1><br>
          <div class="head">
            <span class="blog">{{ userInfo.userPet }}</span>

            <span class="blog" style="color: #a29a9a">{{ blog.blogTime }}</span>

            <span class="blog" style="color: #a29a9a"><svg-icon icon-class="eye-open" /> {{ blog.blogViews }}</span>

            <span
              v-if="$store.state.user.id!==blog.userId"
              class="blog"
              style="color: #a29a9a"
              @click="addOrDelCollection"
            >
              <svg-icon icon-class="star" :class="[collect==true ? 'starTomato' : 'starGrey' ]" /> {{ blog.blogCollections }}
            </span>

            <div class="tag">
              <span>文章标签：</span>
              <router-link v-for="tag in tags" :key="tag.tagId" :to="'/operation/all/'+tag.tagId+'/'+tag.tagName">
                <el-button class="elBtn">{{ tag.tagName }}</el-button>
              </router-link>
            </div>
          </div>
          <div v-html="article.articleContent" />
        </el-card>
      </el-col>
    </el-row>
    <el-backtop><i class="el-icon-top" /></el-backtop>

  </div>

</template>
<!--
article:
articleContent: "<p>而且出去玩</p>"
articleId: 61

blog:
articleId: 61
blogCollections: 1
blogTime: "2021-12-18 15:44:20"
blogTitle: "俄语389陃"
blogType: 1
blogViews: 581
id: 79
lastTime: "2022-01-15 21:33:09"
userId: "1470030077541515265"

userInfo:
userDescription: "hello world!"
userPet: "adminss"
userPhoto: "http://blogim.oss-cn-beijing.aliyuncs.com/my_file/774c58bd-7c94-4570-890b-e0dabd8062dc.jpeg"
-->

<script>
import { isCollection, addOrDeleteCollection } from '@/api/attach'
import { fetchAnyArticle, updateViews } from '@/api/article'
import AllArticle from '@/views/my/article/components/AllArticle'
import AllComments from "@/views/my/article/components/AllComments";
import UserCard from './components/Card'
import Sticky from '@/components/Sticky'
export default {
  name: 'LookArticle',
  components: { AllArticle, Sticky, UserCard, AllComments },
  data() {
    return {
      blog: {},
      article: '',
      tags: [],
      userInfo: {
        userPhoto: '',
        userPet: '',
        userDescription: ''
      },
      collect: false
    }
  },
  created() {
    const id = this.$route.params && this.$route.params.id
    this.getAnyArticle(id)
    this.isCollect(id)
  },
  methods: {
    getAnyArticle(id) {
      fetchAnyArticle(id)
        .then(response => {
          const { article, blog, tags, userInfo } = response.data
          this.article = article
          this.blog = blog
          this.tags = tags
          this.userInfo = userInfo
          updateViews(this.$store.state.user.id, blog.articleId).then(res => {
          })
            .catch(error => {
              console.log(error)
            })
        })
        .catch(error => {
          console.log(error)
        })
    },
    isCollect(id) {
      isCollection(this.$store.state.user.id, id)
        .then(res => {
          this.collect = res.data.isCollect
        })
        .catch(error => {
          console.log(error)
        })
    },
    addOrDelCollection() {
      addOrDeleteCollection(this.$store.state.user.id, this.blog.articleId, !this.collect)
        .then(res => {
          const { isAdd } = res.data
          if (isAdd === 'add') { this.blog.blogCollections++ } else { this.blog.blogCollections-- }
          this.collect = !this.collect
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
  margin-top: 10px;
  height: 80px;
  border-radius:4px;
  background-color: rgba(241,240,240,0.78)
}
.blog{
 line-height: 40px;
  margin-left: 20px;
  margin-right: 20px;
}
.tag{
  line-height: 40px;
  margin-left: 20px;
  margin-right: 20px;
  color: #a29a9a
}
.elBtn{
  color: rgba(52,165,212,0.85);
  height: 25px;
  line-height: 2px;
}
.elBtn:hover{
  color: rgba(52,165,212,0.85);
}
.starGrey{
  cursor: pointer;
  color: #a29a9a;
}
.starTomato{
  cursor: pointer;
  color: #DB7D74;
}
.starGrey:hover{
  color: #e799b0;
}
.row{
  margin-bottom: 20px;
}
</style>
